<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    window.onload=function () {
        //querySelectorAll 拿到的是静态列表
        var ul = document.querySelector("ul")
        //拿的是静态列表
        var liNodes = document.querySelectorAll("ul li");


        //拿的是动态列表
        // var liNodes = ul.getElementsByTagName("li");



        //修改dom结构
        ul.innerHTML += "<li>5</li>"
        liNodes = document.querySelectorAll("ul li");

        for(var i=0;i<liNodes.length;i++){
            liNodes[i].style.background = "pink"
        }
    }
</script>
</html>